<template>
  <div>
    <h1 style="font-size: 4em; margin-bottom: 13%">
      管理后台管理系统
    </h1>
    <a-form
        id="components-form-demo-normal-login"
        :form="form"
        class="login-form"
        @submit="handleSubmit"
        style="text-align:left"
    >
      <a-form-item>
        <a-input
            v-decorator="[
              'account',
              { rules: [{ required: true, message: '请输入账号' }] },
            ]"
            placeholder="账号"
        >
          <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-input
            v-decorator="[
              'password',
              { rules: [{ required: true, message: '请输入密码' }] },
            ]"
            type="password"
            placeholder="密码"
        >
          <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
        </a-input>
      </a-form-item>
      <a-form-model-item>
<!--        <a-cascader placeholder="请选择身份信息" :options=$store.state.exercise.col_cou_list change-on-select @change="onCascaderChange" style="width: 100%"/>-->
        <a-select placeholder="请选择登录身份"  v-decorator="[
              'identity',
              { rules: [{ required: true, message: '请选择登录身份', trigger: 'change' }],
              initialValue:'校管理员'},
            ]">
          <a-select-option value="院管理员">
            院管理员
          </a-select-option>
          <a-select-option value="校管理员">
            校管理员
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-item style="text-align: right; margin-top: 5%;">
        <a-button type="primary" html-type="submit" class="login-form-button">
          登录
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>

//import { mapState } from 'vuex' //

export default {
  name: "loginSchool",
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: 'normal_login' });
  },
  methods: {
    handleSubmit(e) { // 登录
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          this.$store.dispatch('access/login', values) // 调用登录接口
              .then( data => {
                if(data.code === 0){
                  this.$message.error('账号/或密码错误');
                }else {
                  this.$router.push('/');
                }
              }).catch(error=>{
            this.$message.error(error);
          })
        }
      });
    },
  },
  // computed: {
  //   ...mapState({ // 这个是提取store中access文件夹目录下的数据
  //     'loginState': 'login'
  //   })
  // }
};
</script>
<style scoped>
#components-form-demo-normal-login .login-form {
  max-width: 300px;
}
#components-form-demo-normal-login .login-form-forgot {
  float: right;
}
#components-form-demo-normal-login .login-form-button {
  width: 100%;
}
</style>
